<!--
 * new page
 * @author: sunYihui
 * @since: 2024-09-14
 * Details.vue
-->
<template>
    <el-dialog
     v-model="dialogVisible"
     :title="model.title"
     width="800"
     :before-close="handleClose"
   >
 
  <div class="title">
     发布时间: {{ model.addtime }}
  </div>
  <div class="content" v-html="model.content">
  </div>
   </el-dialog>
 </template>
 
 <script lang='ts' setup>
 import { getNews } from '../../service/news/news';
 import { defineProps,defineEmits,ref,onMounted, reactive, toRefs} from 'vue'
 const dialogVisible=ref(true);
 const emit=defineEmits(["close"]);
 const handleClose=()=>{
     emit("close");
 }
 
 const props=defineProps({
     id:{
         type:Number,
         require:true
     }
 })
 const state=reactive({
     model:{
         id: 0,
     title:"",
     picture:"",
     edituser:"",
     state:null,
     type:null,
     hits: 0,
     content:"",
     addtime:""
     }
 })
 const {model}=toRefs(state);
 const getData=async ()=>{
 
      const res:any=await getNews(props.id!);
 
      if(res.errCode===10000){
          state.model=  res.data;
 
          if(state.model.content && state.model.content.indexOf("<img")!=-1){
 
             state.model.content= state.model.content.replace(/<img/g,"<img style='max-width:100%'")
          }
      }
 }
 onMounted(()=>{
     getData();
 })
 </script>
 <style scoped>
 .title{
     border-bottom: solid 1px #ddd;
     line-height: 50px;
     text-align: center;
 }
 .content{
     padding: 20px;
 }
 </style>